<template>
  <div class="tool-bar">
    <div class="tool" title="时间线动画开始或暂停" @click="reset">
      <i v-if="isPaused" class="el-icon-video-pause"></i>
      <i v-else class="el-icon-video-play"></i>
    </div>
  </div>
</template>

<script>
export default {
  name: "Test1ToolBar",

  data() {
    return {
      isPaused: false,
    };
  },
  computed: {
    getIsPuased() {
      return this.$store.state.isPaused;
    },
  },
  watch: {
    getIsPuased: {
      handler(newVal) {
        this.isPaused = newVal;
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {
  },

  methods: {
    reset(){
      this.isPaused = !this.isPaused;

      this.$store.commit("setIsPaused", this.isPaused);
    }
  },
};
</script>

<style lang="less" scoped>
.tool-bar {
  position: absolute;
  display: flex;
  flex-direction: column-reverse;
  width: 50px;
  left: 20%;
  bottom: 65px;
  margin: 10px;
  margin-left: 65px;
  border-radius: 4px;
  background-color: var(--b-color-1);
  padding-bottom: 5px;

  .tool {
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    background-color: rgba(155, 155, 155, 0.23);
    color: var(--t-color);
    margin: 0 5px;
    margin-top: 5px;
    padding: 2px;
    border-radius: 4px;
    cursor: pointer;
    i {
      color: var(--t-color);
      font-size: 37px;
    }
  }
}
</style>
<style lang="less">
.no-click {
  cursor: not-allowed !important;
  path {
    fill: var(--t-color-no) !important;
  }
}
</style>
